<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple-websocket-test</title>

    <script type="text/javascript">
        console.info('hello:'+window.location.host);

        var host = 'ws://' + window.location.host + '/test-websocket/simple';

        var socketServer = {};
        socketServer.socket = (function (host) {
            if ('WebSocket' in window) {
                return new WebSocket(host)
            }
            if ('MozWebSocket' in window) {
                return new MozWebSocket(host);
            }
        })(host);

        socketServer.socket.onopen = function () {
            console.log('Info: WebSocket connection opened.');
        };


        socketServer.socket.onclose = function () {
            console.log('Info: WebSocket closed.');

        };


        socketServer.socket.onmessage = function (message) {
            console.log(message.data);

            var contentDiv = document.getElementById("content");
            var pEle = document.createElement("P");
            var pTextNode = document.createTextNode(message.data + '');

            pEle.appendChild(pTextNode)

            contentDiv.appendChild(pEle).appendChild(document.createElement('br'))


        }


        socketServer.socket.onerror = function (message) {
            console.log(message)
        }



        function send() {
            var val = document.getElementById("input").value;
            console.log('send:'+val);
            socketServer.socket.send(val)

        }

    </script>


</head>
<body>

<div>

    <H3>TEST Hello world!!!!</H3>


    <input type="text" id="input"><button name="send" style="height: 30px;" onclick="send()">Send</button>


    <div id="content">

    </div>



</div>


</body>
</html>